<template>
  <div>
    <a-form
      :model="formState"
      name="horizontal_login"
      layout="inline"
      autocomplete="off"
    >
      <a-form-item>

        <el-cascader
          :props="{ multiple: true }"
          v-model="formState.name"
          :options="opbulletin"
          max-collapse-tags="1"
          collapse-tags
          collapse-tags-tooltip
        />
      </a-form-item>
      <a-form-item>
        <a-range-picker
          v-model:value="formState.time"
          :placeholder="['收藏开始日期', '收藏结束日期']"
        />
      </a-form-item>
      <a-form-item>
        <a-button
          type="primary"
          html-type="submit"
          :icon="h(SearchOutlined)"
          @click="getData"
          >查询</a-button
        >
      </a-form-item>
    </a-form>
    <a-table
      class="ant-table-striped mt-[20px]"
      size="middle"
      :columns="columns"
      :data-source="dataSource"
      :pagination="false"
      :scroll="{x: 1000}"
      :row-class-name="
        (_record, index) => (index % 2 === 1 ? 'table-striped' : null)
      "
    >
      <template #bodyCell="{ column, text, record }">
        <template v-if="column.dataIndex == 'infoid'">
          <div class="ell">{{ getType(record.infoid) }}</div>
        </template>

        <template v-if="column.dataIndex == 'createtime'">
          <div class="ell">{{ getDate(record.createtime) }}</div>
        </template>

        <template v-if="column.dataIndex == 'releasetime'">
          <div class="ell">{{ getDate(record.releasetime) }}</div>
        </template>

        <template v-if="column.dataIndex == 'bx_price'">
          <div class="ell">{{ getMoney(record.bx_price || 0) }}</div>
        </template>
        
        <template v-if="column.dataIndex == 'title'">
          <a  class="ell" target="_blank" :href="`/searchInfo?id=${record.nid}`"
            >{{record.title}}</a
          >
        </template>
        <template v-if="column.dataIndex == 'option'">
          <a-button type="link" danger @click="cancel(record.nid)"
            >取消收藏</a-button
          >
        </template>
      </template>
    </a-table>
    <a-pagination
      class="mt-[20px]"
      v-model:current="page.current"
      show-quick-jumper
      :total="page.total"
      @change="onChange"
      :show-total="(total) => `共 ${page.total} 条`"
    />
  </div>
</template>

<script lang="ts" setup>
import { message } from "ant-design-vue";
import { reactive, ref } from "vue";
import {
  collectcancel,
  collectlist,
  searchgetInfomation,
  getDate,
} from "../../../../Api/work";
import { h } from "vue";
import { getInfomationchild } from "@/Api/shoop/index.js";
import { SearchOutlined } from "@ant-design/icons-vue";
import dayjs from "dayjs";
const page = reactive({
  current: 1,
  total: 0,
  size: 10,
});

const formState = ref({
  username: "",
  time: "",
});

const columns = [
  { title: "公告类型", dataIndex: "infoid" },
  { title: "标题信息", dataIndex: "title" },
  { title: "金额", dataIndex: "bx_price" },
  { title: "发布时间", dataIndex: "createtime" },
  { title: "收藏日期", dataIndex: "releasetime" },
  { title: "操作", dataIndex: "option" },
];
const type = ref([]);

const before = async () => {
  const res = await searchgetInfomation();
  type.value = res?.data?.data;
};

const getType = (id) => {
  return type.value?.find((p) => p.infoid == id)?.infoname || "--";
};

onMounted(() => {
  before();
});

const dataSource = ref([]);
const getData = async () => {
  console.log("formState.value", formState.value);

  const params = {
    ...formState.value,
    name: formState.value?.name?.map((p) => {
      if (p?.length > 1) {
        return p[1];
      } else {
        return p;
      }
    }),
    page: page.current,
    limit: page.size,
  };

  if (params.time?.[0]) {
    params.start_time = dayjs(params.time?.[0].format('YYYY-MM-DD 00:00:00')).unix();
    params.end_time = dayjs(params.time?.[1].format('YYYY-MM-DD 23:59:59')).unix();
    delete params.time;
  }

  const res = await collectlist(params);
  dataSource.value = res.data?.data?.list;

  page.total = res.data?.data?.count;
};

getData();

const cancel = async (nid) => {
  const res = await collectcancel({ nid });

  if (res?.data?.code == 1) {
    message.success("操作成功");

    getData();
  } else {
    message.error(res?.data?.msg);
  }
};

const onChange = (p) => {
  page.current = p;
  getData();
};

let opbulletin = ref([]);
const getInfomationchilds = () => {
  getInfomationchild().then((res) => {
    opbulletin.value = res.data.data;
  });
};
getInfomationchilds();

const getMoney = (money) => {
  if (money <= 10000) return Number(money || 0).toFixed(3) + "元";
  if (money > 10000 && money <= 100000000)
    return Number((money || 0) / 10000).toFixed(3) + "万元";
  else return Number((money || 0) / 100000000).toFixed(3) + "亿元";
};
</script>

<style lang="scss" scoped>
.ant-table-striped :deep(.table-striped) td {
  background-color: #edf0f6;
}

:deep(
    :where(.css-dev-only-do-not-override-omspr6).ant-table-wrapper
      .ant-table-thead
      > tr
      > th
  ) {
  background: #ecf4ff !important;
}

.ell {
  max-width: 600px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
